<? $data = $data ? $data : array(); ?>
<h1>
	<a href="/admin_product">Proizvodi</a> &raquo;
	<i>
	<? if($data): ?>
		<?= $data["name"]; ?>
	<? else: ?>
		Novi proizvod
	<? endif; ?>
	</i>
</h1>
<form action="/admin_product/save" method="post">
	<input type="hidden" name="data[id]" value="<?=$data["id"]; ?>" />
	<label class="required" for="code">Kôd:</label>
	<input type="text" name="data[code]" id="code" value="<?= $data["code"]; ?>" maxlength="10" class="small" />

	<div class="right">
		<label>
			AKCIJA!
			<input type="checkbox" value="1" name="data[discount]"<? if($data["discount"]):?> checked="checked"<? endif; ?> />
		</label>
	</div>
	
	<label class="required" for="name">Naziv:</label>
	<input type="text" name="data[name]" id="name" value="<?= $data["name"]; ?>" class="large" />

	<label for="price">Preporučena Cena:</label>
	<input type="text" name="data[price]" id="price" value="<?= $data["price"]; ?>" class="small" />

	<label for="desc">Kratak opis:</label>
	<textarea name="data[desc]" id="desc"><?= $data["desc"]; ?></textarea>

	<label class="required">Kategorija:</label>
	<div class="left" style="margin:5px">
		<?= $this->fetch("elements/category_selector", array("name"=>"data[category_id]", "value"=>array_shift(array_keys($data["category_ids"])))); ?>
	</div>
	
	<? if((int)$data["id"]>0): ?>
	<label>Slike:</label>
	<ul class="product-images">
		<li class="add">
			<input type="file" name="image_new" onchange="UploadImage(this)" />
			<span>+dodaj</span>
		</li>
		<? foreach($data["images"] as $image): ?>
		<li class="sort">
			<input type="button" class="btn delete" onclick="if(confirm('Da li želite da uklonite sliku?')){$(this).parent().remove();}" />
			<input type="hidden" class="position" name="data[image][<?=$image["id"] ?>][position]" value="<?= $image["position"]; ?>" />
			<input type="hidden" name="data[image][<?=$image["id"] ?>][src]" value="<?= $image["src"]; ?>" />
			<input type="hidden" name="data[image][<?=$image["id"] ?>][description]" value="<?= $image["description"]; ?>" />
			<img src="/image/products/<?= $data["id"]; ?>/<?= $image["src"]; ?>?w=100&h=100&bg=%23ccc" />
			<div class="description"><?= $image["description"] ?></div>
		</li>
		<? endforeach; ?>
	</ul>
	<? endif; ?>

	<br clear="all" />
	<input type="submit" value="Sačuvaj" class="submit right" />
</form>
<? if((int)$data["id"]>0): ?>
<ul style="display:none">
<li id="image-template" class="sort">
	<input type="button" class="btn delete" onclick="if(confirm('Da li želite da uklonite sliku?')){$(this).parent().remove();}" />
	<input type="hidden" class="position" name="data[image][?][position]" value="" />
	<input type="hidden" class="src" name="data[image][?][src]" value="" />
	<input type="hidden" class="description" name="data[description][?][src]" value="" />
	<img src="" />
	<div class="description"></div>
</li>
</ul>
<form style="display:none" id="upload-form" enctype="multipart/form-data" method="post" action="/admin_product/upload_image/<?=$data["id"]; ?>" target="uploadframe"></form>
<iframe style="display:none;" name="uploadframe" id="uploadframe" src="" onload="OnUploadImage(this);"></iframe>
<? endif; ?>
<script type="text/javascript">
$(function(){

	$(document.body).click(function(e){
		if(e.target.nodeName.toLowerCase()!="a"){
			$('.dropdown').slideUp(300);
		}
	});

	$('#tag-search').attr("autocomplete", "off");
	$('#tag-search').keyup(function(e){
		var t=$(this);

		if(e.keycode==13){
			t.attr("prev", "");
		}

		$(this).attr("timeout", setTimeout(function(){
			var to = t.attr("timeout");
			if(to){
				var prev = t.attr("prev");
				var val = t.val().replace(/^\s+|\s+$/g, "");
				if(prev != val && val.length>2){
					t.attr("prev", val);
					var exc = [];
					$('.product-tags li').each(function(){
						if(!$(this).hasClass("empty")){
							exc.push($(this).find("input[type=hidden]").val());
						}
					});

					$.ajax({
						url: '/admin_tag/search/'+val,
						type: 'post',
						data: {except: exc},
						beforeSend: function(){
							t.addClass("loading");
						},
						complete: function(req){
							t.removeClass("loading");
							if(req.status==200){
								var tags = eval('('+req.responseText+')');
								if(tags.length){
									var ul = $('ul.dropdown');
									if(!ul.length){
										ul = $('<ul class="dropdown" />');
										t.after(ul);
									}
									ul.empty();
									var li;
									for(var i=0; i<tags.length; i++){
										ul.append('<li><a href="javascript:void(0)" onclick="ProductAddTag(this,'+tags[i].id+',\''+tags[i].name+'\')">'+tags[i].name+'</a></li>');
									}
									if(ul.is(":hidden")){
										ul.slideDown("fast");
									}
								}else{
									$('ul.dropdown').remove();
								}
							}
						}
					});

					t.attr("timeout", 0);
				}
			}
		}, 1000));
	});

	$('#tag-search').keydown(function(){
		var to = $(this).attr("timeout");
		if(to){
			clearTimeout(to);
			$(this).attr("timeout",0);
		}
	});
});
<? if($data): ?>
setItemEvents();
$(".product-images").sortable({
	revert: 300,
	items: '.sort',
	stop: function(e,ui){
		$(e.target).find("li input.position").each(function(index){$(this).val(index);});
	}
});
function UploadImage(inpt){
	var form = $("#upload-form");
	var ninpt = $(inpt).clone(true);
	var li = $(".product-images li.add");
	li.prepend(ninpt);
	form.append(inpt);
	form.submit();
	li.addClass("loading");
}
function OnUploadImage(frame){
	$('.product-images li.add.loading').removeClass('loading');
	var fBody = $(frame.contentWindow.document.body);
	var response = $(fBody[0]).html();
	if(response.length){
		var response = eval('('+response+')');
		console.dir(response);
		if(response.status){
			var li = $("#image-template").clone(true).removeAttr("id");
			var image = response.image;
			li.find("input[name]").each(function(){
				$(this).attr("name", $(this).attr("name").replace("[?]", "["+image.id+"]"));
			});
			li.find("img").attr("src", "/image/products/<?=$data["id"]; ?>/"+image.src+"?w=100&h=100&bg=%23ccc");
			li.find("input.position").val(image.position);
			li.find("input.src").val(image.src);
			$(".product-images").append(li);
			setItemEvents(li);
		}
	}
}
<? endif; ?>
function setItemEvents(li) {
	li = li ? li : $(".product-images li");
	var baloon = $("#baloon");
	if(baloon.length==0) {
		$(document.body).prepend('<div id="baloon" />');
		baloon = $("#baloon");
	}

	li.mousemove(function(e){
		baloon.css({
			left: e.pageX+10,
			top: e.pageY
		});
	});
	
	li.mouseover(function(e){
		var desc = $(this).find(".description").html();
		baloon.html(desc).show();
		baloon.css({
			left: e.pageX+10,
			top: e.pageY
		});
	});
	li.mouseout(function(e){
		baloon.html("").hide();
	});

	li.dblclick(function(e){
		var desc = $(this).children(".description");
		var newDesc = prompt("Kratak opis slike:", desc.html());

		desc.html(newDesc);
		$(this).children("input[type=hidden]").eq(2).val(newDesc);
	});
}
function ProductAddTag(a,tagid,tagname){
	var li = $('<li />');
	var inpt = $('<input type="hidden" name="data[tags][]" value="'+tagid+'" />');
	li.append(inpt);
	li.append(tagname);
	li.append('<a href="javascript:void(0)" onclick="ProductRemoveTag(this)">X</a>');
	$('.product-tags').append(li);
	$(a).parent().remove();
	$('.product-tags li.empty').hide();
}
function ProductRemoveTag(a){
	if(confirm('Da li želite da uklonite kategoriju?')){
		$(a).parent().remove();
	}
	if($('.product-tags li').length > 1){
		$('.product-tags li.empty').hide();
	}else{
		$('.product-tags li.empty').show();
	}
}
</script>